<template>
  <div class="swiper-box">
    <div class="nev-menu">
      <ul class="menu-wrap">
        <li class="menu-item" v-for="(item, index) of meItem" :key="index">
          <span>{{ item.name }}</span>
          <div class="children">
            <ul v-for="(item, index) of nM" :key="index">
              <li v-for="(item1, index1) of item" :key="index1">
                <a href="javascript:;">
                  <img v-lazy="item1.img" alt="" />
                  <span>{{ item1.name }}</span>
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item, index) of imgArr" :key="index">
        <!-- src如果没相对路径，默认为public -->
        <img :src="item.img" alt="" @click="jump('product/30')" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div
      class="swiper-button-prev"
      tabindex="0"
      aria-label="Next slide"
      role="button"
    ></div>
    <div
      class="swiper-button-next"
      tabindex="0"
      aria-label="Next slide"
      role="button"
    ></div>
  </div>
</template>

<script>
import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import style (<= Swiper 5.x)
// import 'swiper/css/swiper.css'
export default {
  props: {
    navMsg: Array,
  },
  components: { swiper, swiperSlide },
  data() {
    return {
      swiperOptions: {
        loop: true,
        //   分页器
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        autoplay: { delay: 5000, disableOnInteraction: false },
        effect: 'cube',
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6,
        },
        // navigation: {},
        // Some Swiper option/callback...
      },
      imgArr: [
        { img: 'img/slider/slide-1.jpg' },
        { img: 'img/slider/slide-2.jpg' },
        { img: 'img/slider/slide-3.jpg' },
        { img: 'img/slider/slide-4.jpg' },
        { img: 'img/slider/slide-5.jpg' },
      ],
      meItem: [
        { name: '手机 电话卡' },
        { name: '电视 盒子' },
        { name: '笔记本 平板' },
        { name: '家电 插线板' },
        { name: '出行 穿戴' },
        { name: '智能 路由器' },
        { name: '电源 配件' },
        { name: '生活 箱包' },
      ],
    }
  },
  computed: {
    // swiper() {
    //   return this.$refs.mySwiper.$swiper
    // },
    /**
    navMsg数组最大长度为24，超过则保留24位
    转换为二维数组，4个元素一组
    @return 新数组
   */
    nM() {
      let matrix = []
      // console.log(a)
      if (this.navMsg.length <= 6) matrix = [this.navMsg]
      else {
        let max = 0
        let yu = 0
        Math.ceil(this.navMsg.length / 6) > 6
          ? (max = 6)
          : (max = Math.ceil(this.navMsg.length / 6))
        // 用slice方法分割数组，组成新的数组
        for (let i = 0; i < max; i++) {
          if (i == max - 1 && this.navMsg.length % 6 !== 0)
            matrix.push(
              this.navMsg.slice(i * 6, i * 6 + (this.navMsg.length % 6))
            )
          else matrix.push(this.navMsg.slice(i * 6, i * 6 + 6))
        }
      }
      return matrix
    },
  },
  methods: {
    jump(a) {
      this.$router.push({ path: a })
    },
  },
  mounted() {
    // console.log('Current Swiper instance object', this.swiper)
    // console.log(this.nM, this.navMsg)
  },
}
</script>

<style lang="scss" scopedSlots>
.swiper-box {
  // overflow: hidden;
  //   height: 451px;
  position: relative;
  .nev-menu {
    position: absolute;
    width: 264px;
    z-index: 11;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 26px 0;
    box-sizing: border-box;
    .menu-wrap {
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      // align-items: center;
      // vertical-align: middle;
      // justify-content: center;
      .menu-item {
        // 用grid实现文本居中
        display: grid;
        align-items: center;
        width: 100%;
        height: 12%;
        color: #fff;
        font-size: 16px;
        text-align: left;
        padding-left: 30px;
        // position: relative;
        .children {
          // width: 964px;
          // height: 45px;
          color: black;
          background-color: #fff;
          position: absolute;
          z-index: 11;
          display: none;
          left: 264px;
          top: 0;
          flex-wrap: nowrap;

          ul {
            padding-left: 53px;
            box-sizing: border-box;
            width: 240.5px;
            li {
              height: 75px;
              line-height: 15px;
              display: grid;

              a {
                display: flex;
                align-items: center;
                img {
                  width: 42px;
                  height: 35px;
                  margin-right: 15px;
                }
                span {
                  color: black;
                }
              }
            }
          }
        }
        &:hover {
          background-color: #ff6600;
          .children {
            display: flex;
          }
        }
        &::after {
          content: '';
          width: 10px;
          height: 15px;
          position: absolute;
          right: 30px;
          background: url(/img/icon-arrow.png) no-repeat;
          background-size: cover;
        }
      }
    }
  }
  .swiper-wrapper {
    height: 451px;
    .swiper-slide {
      height: 100%;
      img {
        width: 100%;
        // height: 451px;
        height: 100%;
      }
    }
  }
  .swiper-button-prev {
    margin-left: 264px;
  }
  /*改变了颜色和加粗的样式*/
  // .swiper-button-next {
  //   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  // }
}
</style>